import React, { useState, useEffect } from 'react';
import { Typography, Card, Row, Col, List, Button, Tag } from 'antd';
import { Link } from 'react-router-dom';
import { MessageOutlined, UserOutlined, BarChartOutlined, RobotOutlined } from '@ant-design/icons';
import { ShieldOutlined, Statistic } from '../components/icons/IconComponents';
import chatService from '../api/chatService';
import contactsService from '../api/contactsService';

const { Title, Paragraph } = Typography;

const HomePage = () => {
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState({
    messageCount: 0,
    contactCount: 0,
    puaDetections: 0
  });
  const [recentChats, setRecentChats] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        // 模拟数据获取
        setTimeout(() => {
          setStats({
            messageCount: 1587,
            contactCount: 42,
            puaDetections: 23
          });

          setRecentChats([
            {
              id: 1,
              contact: '张三',
              lastMessage: '明天我们一起去看电影吧？',
              time: '10:30',
              unread: 2
            },
            {
              id: 2,
              contact: '工作群',
              lastMessage: '项目进度会议在下午3点',
              time: '09:15',
              unread: 5
            },
            {
              id: 3,
              contact: '李四',
              lastMessage: '资料我已经发给你了，请查收',
              time: '昨天',
              unread: 0
            }
          ]);

          setLoading(false);
        }, 1000);

        // 实际API调用
        // const statsData = await chatService.getStats();
        // const recentChatsData = await chatService.getRecentChats(5);
        // setStats(statsData);
        // setRecentChats(recentChatsData);
        // setLoading(false);
      } catch (error) {
        console.error('获取数据失败:', error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  const features = [
    {
      title: '聊天优化',
      icon: <MessageOutlined style={{ fontSize: 24 }} />,
      description: '使用AI帮助改进聊天内容，提供更流畅自然的对话体验。',
      link: '/chat'
    },
    {
      title: '联系人管理',
      icon: <UserOutlined style={{ fontSize: 24 }} />,
      description: '管理联系人关系和聊天目标，为每个关系定制交流策略。',
      link: '/contacts'
    },
    {
      title: 'PUA检测',
      icon: <ShieldOutlined style={{ fontSize: 24 }} />,
      description: '分析聊天记录中的PUA话术，提供防护建议和应对策略。',
      link: '/pua/detection'
    },
    {
      title: '聊天分析',
      icon: <BarChartOutlined style={{ fontSize: 24 }} />,
      description: '深入分析聊天记录，了解互动频率、主题和情感倾向。',
      link: '/analytics'
    }
  ];

  return (
    <div className="home-page">
      <div className="hero-section">
        <Title>微信聊天助手</Title>
        <Paragraph>
          智能聊天助手为您的微信提供智能优化和安全保障，让沟通更轻松、更有效。
        </Paragraph>
      </div>

      <div className="stats-section">
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <Statistic 
                title="消息总数" 
                value={stats.messageCount} 
                suffix="条"
                loading={loading}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic 
                title="联系人数" 
                value={stats.contactCount} 
                suffix="人"
                loading={loading}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic 
                title="PUA检测次数" 
                value={stats.puaDetections} 
                suffix="次"
                loading={loading}
              />
            </Card>
          </Col>
        </Row>
      </div>

      <div className="features-section">
        <Title level={2}>功能介绍</Title>
        <Row gutter={[16, 16]}>
          {features.map(feature => (
            <Col xs={24} sm={12} md={6} key={feature.title}>
              <Card
                hoverable
                className="feature-card"
              >
                <div className="feature-icon">{feature.icon}</div>
                <Title level={4}>{feature.title}</Title>
                <Paragraph>{feature.description}</Paragraph>
                <Link to={feature.link}>
                  <Button type="primary">了解更多</Button>
                </Link>
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      <div className="recent-chats-section">
        <Title level={2}>最近会话</Title>
        <Card>
          <List
            loading={loading}
            dataSource={recentChats}
            renderItem={item => (
              <List.Item
                actions={[
                  <Button type="link">
                    <Link to={`/chat/${item.id}`}>打开</Link>
                  </Button>
                ]}
              >
                <List.Item.Meta
                  title={
                    <div>
                      {item.contact}
                      {item.unread > 0 && (
                        <Tag color="red" style={{marginLeft: 8}}>
                          {item.unread}
                        </Tag>
                      )}
                    </div>
                  }
                  description={item.lastMessage}
                />
                <div>{item.time}</div>
              </List.Item>
            )}
          />
        </Card>
      </div>
    </div>
  );
};

export default HomePage; 